
<template>
    <div class="onw_container">
        <header>
            <p>应收账款</p>
        </header>
        <el-form :inline="true" :model="form" class="main_searchBar">
            <el-form-item label="区域:">
                <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
            </el-form-item>
            <el-form-item label="账期:">
                <el-date-picker
                    size="mini"
                    v-model="form.month"
                    value-format="yyyyMM"
                    type="month"
                    placeholder="选择年月"
                    :picker-options="pickerOptions"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="类型:">
                <el-select v-model="form.custType" size="mini">
                    <el-option
                        v-for="(it, i) in types"
                        :key="i"
                        :label="it.label"
                        :value="it.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    size="mini"
                    @click="search()"
                    type="primary"
                    id="search_btn"
                    >查询</el-button
                >
                <el-button
                    size="mini"
                    type="success"
                    id="export_btn"
                    @click="handle_export"
                    >导出</el-button
                >
            </el-form-item>
        </el-form>

        <ux-grid
            size="mini"
            id="tablePx"
            ref="tablePx"
            :header-row-style="{ background: '#eef1f6' }"
            border
            :stripe="true"
            :widthResize="true"
            :height="height"
            style="width: 100%"
            v-loading="showTableLoading"
            show-overflow="tooltip"
            show-header-overflow="title"
        >
            <!-- <ux-table-column
                type="index"
                width="60"
                title="序号"
                fixed="left"
                align="center"
            /> -->
            <ux-table-column
                min-width="120"
                title="区域名称"
                fixed="left"
                align="center"
                field="parentName"
            />
            <ux-table-column
                v-if="form.custType == 'C5' || form.custType == 'CUST'"
                min-width="180"
                title="支局名称"
                align="center"
                field="areaName"
            />
            <ux-table-column
                v-if="form.custType == 'CUST'"
                min-width="140"
                title="客户经理"
                align="center"
                field="custName"
            />

            <ux-table-column
                :title="item.label"
                min-width="130"
                v-for="(item, i) in columns"
                :key="'item' + i"
                align="center"
            >
                <ux-table-column
                    :title="it.label"
                    :field="it.value"
                    align="center"
                    min-width="130"
                    v-for="(it, index) in item.children"
                    :key="'it' + index"
                />
            </ux-table-column>
        </ux-grid>
    </div>
</template>

<script>
import { $budgetAPI, $budget } from "@/api";
import qs from "qs";
import { getCookie, setCookie } from "@/common/js/cookie";
import prefixAPI from "@/api/prefixAPI"; // prefixAPI 前缀
const url = prefixAPI.pack;
import {
    setSessionStorage,
    getSessionStorage,
    removeSessionStorage,
} from "@/common/js/storage";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
    data() {
        return {
            form: {
                areaId: "",
                month: this.moment().subtract(1, "months").format("YYYYMM"),
                custType: "C4",
            },
            pickerOptions: this.pickerDisabled(),
            disabledTime: this.moment().subtract(1, "months").format("YYYYMM"),
            showTableLoading: false,
            height: window.innerHeight - 60 - 30 - 175,
            tableData: [],
            columns: [
                {
                    label: "截止12月底应收账款",
                    children: [
                        {
                            label: "应收账款期末值",
                            value: "fee0",
                        },
                        {
                            label: "当月新增欠费",
                            value: "fee1",
                        },
                        {
                            label: "环比上月增加值",
                            value: "fee2",
                        },
                        {
                            label: "3个月以上欠费",
                            value: "fee3",
                        },
                        {
                            label: "应收账款占收比",
                            value: "fee4",
                        },
                    ],
                },
                {
                    label: "其中：项目型欠费",
                    children: [
                        {
                            label: "项目型欠费期末值",
                            value: "fee5",
                        },
                        {
                            label: "其中：30天以内",
                            value: "fee6",
                        },
                        {
                            label: "其中：30天-1年",
                            value: "fee7",
                        },
                        {
                            label: "其中：1-2年",
                            value: "fee8",
                        },
                        {
                            label: "其中：2年以上",
                            value: "fee9",
                        },
                    ],
                },
                {
                    label: "其中：用户欠费",
                    children: [
                        {
                            label: "项目型欠费期末值",
                            value: "fee10",
                        },
                        {
                            label: "其中：30天以内",
                            value: "fee11",
                        },
                        {
                            label: "其中：30天-1年",
                            value: "fee12",
                        },
                        {
                            label: "其中：1-2年",
                            value: "fee13",
                        },
                        {
                            label: "其中：2年以上",
                            value: "fee14",
                        },
                    ],
                },
                {
                    label: "其中：OCS分摊欠费",
                    children: [
                        {
                            label: "项目型欠费期末值",
                            value: "fee15",
                        },
                        {
                            label: "其中：30天以内",
                            value: "fee16",
                        },
                        {
                            label: "其中：30天-1年",
                            value: "fee17",
                        },
                        {
                            label: "其中：1-2年",
                            value: "fee18",
                        },
                        {
                            label: "其中：2年以上",
                            value: "fee19",
                        },
                    ],
                },
            ],
            types: [
                {
                    label: "县分",
                    value: "C4",
                },
                {
                    label: "支局",
                    value: "C5",
                },
                {
                    label: "客户经理",
                    value: "CUST",
                },
            ],
        };
    },
    methods: {
        getHeight() {
            this.height = window.innerHeight - 60 - 30 - 175;
        },
        pickerDisabled() {
            let self = this;
            return {
                disabledDate(time) {
                    if (self.disabledTime) {
                        var timeyear = time.getFullYear();
                        var timemonth = time.getMonth() + 1;
                        if (timemonth >= 1 && timemonth <= 9) {
                            timemonth = "0" + timemonth;
                        }
                        var currentdate =
                            timeyear.toString() + timemonth.toString();
                        if (currentdate > self.disabledTime) {
                            return true;
                        }
                    }
                },
            };
        },
        // 初始化列表接口
        getInitList() {
            this.showTableLoading = true;
            $budgetAPI.getListOweAccount(
                this.form,
                (res) => {
                    if (res.code == 0) {
                        this.tableData = res.content;
                        this.$refs.tablePx.reloadData(this.tableData);
                    } else {
                        this.tableData = [];
                        this.$refs.tablePx.reloadData([]);
                    }
                    this.showTableLoading = false;
                },
                (err) => {
                    console.log(err);
                }
            );
        },
        search() {
            this.getInitList();
        },
        handle_export() {
            const { form } = this;
            var params = {
                ...form,
                token: getCookie("token"),
            };
            window.open(
                `${url}/oweAccount/ExportOweAccountData?${qs.stringify(
                    params
                )}`,
                "_self"
            );
        },
        async initDate() {
            this.form.month = await this.getMonth();
            this.getInitList();
        },
        getMonth() {
            return new Promise((resolve) => {
                $budgetAPI.incomeKeepRegionalMonth({ maximum: 15 }, (res) => {
                    resolve(res.content);
                });
            });
        },
    },
    created() {
        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        this.form.areaId = this.accountInfo.areaId;
        this.initDate();
        
        window.addEventListener("resize", this.getHeight);
    },
    destroyed() {
        // 计算高度
        window.removeEventListener("resize", this.getHeight);
    },
};
</script>

<style lang="scss" scoped>
.onw_container {
    width: 100%;
    height: 100%;
    & > header {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .page_box {
        display: flex;
        justify-content: flex-end;
    }
}
</style>
